<template>
	<view
		class="container"
		:style="{
			height: height * 2 + 'rpx',
		}"
	>
		<view class="box_common_1 navbar__header">
			<view class="navbar__header_left">
				<slot name="left">
					<view
						v-if="isNavBarLeftShow"
						class="box_common_10"
						@click="onClickLeft"
					>
						<image
							style="width: 50rpx; height: 50rpx"
							src="./img/icon_back.png"
							mode="scaleToFill"
						/>
						<text
							v-if="isNavBarLeftTextShow"
							:style="{
								fontSize: navBarLeftTextSize,
							}"
							>返回</text
						>
					</view>
				</slot>
			</view>
			<view class="navbar__header_center">
				<slot name="content">
					<view
						v-if="isNavBarContentShow"
						class="box_common_10"
						@click="onClickTitle"
					>
						<text class="navbar__header_center_text">{{ title }}</text>
					</view>
				</slot>
			</view>
			<view class="navbar__header_right">
				<slot name="right">
					<view v-if="isNavBarRightShow" @click="onClickRight"> </view>
				</slot>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'NavBar',
	emits: ['clickLeft', 'clickRight', 'clickTitle'],
	props: {
		// 组件height, 要和 SafeAreaContent 组件的 offsetTop 属性一致
		height: {
			type: [Number, String],
			default: 0,
		},
		title: {
			type: String,
			default: '',
		},
		// 是否显示左侧内容
		isNavBarLeftShow: {
			type: Boolean,
			default: true,
		},
		// 是否显示中间内容
		isNavBarContentShow: {
			type: Boolean,
			default: true,
		},
		// 是否显示右侧内容
		isNavBarRightShow: {
			type: Boolean,
			default: false,
		},
		// 左侧按钮文字是否显示
		isNavBarLeftTextShow: {
			type: Boolean,
			default: true,
		},
		// 左侧按钮文字大小
		navBarLeftTextSize: {
			type: String,
			default: '30rpx',
		},
	},
	computed: {},
	methods: {
		onClickLeft() {
			this.$emit('clickLeft');
		},
		onClickRight() {
			this.$emit('clickRight');
		},
		onClickTitle() {
			this.$emit('clickTitle');
		},
	},
};
</script>

<style lang="scss" scoped>
.container {
}
.navbar__header {
	height: 100%;
	padding: 0 20rpx;
}
.navbar__header_left {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	width: 120rpx;
	justify-content: flex-start;
	align-items: center;
}
.navbar__header_center {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex: 1;
	justify-content: center;
	padding: 0 10px;
	overflow: hidden;
}
.navbar__header_right {
	width: 120rpx;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	// width: 150rpx;
	// padding-right: 30rpx;
	justify-content: flex-end;
	align-items: center;
}
</style>
